<template>
    <div class="ml-16px mr-16px content-container">
        <div class="pl-26px pt-10px pb-10px">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="110px" class="pt-26px">
                <el-form-item label="项目名称" prop="name">
                    <div class="w-600px"><el-input :disabled="disabled" v-model="ruleForm.name" placeholder="请输入完整公司名称"></el-input></div>
                </el-form-item>
                <el-form-item label="目标词" prop="targetWord">
                    <div class="w-600px"><el-input :disabled="ruleForm.disabled" v-model="ruleForm.targetWord" placeholder="请输入目标词"></el-input></div>
                </el-form-item>
                <el-form-item label="域名" prop="domains">
                    <div class="flex items-center">
                        <div class="w-600px"><el-input v-model="ruleForm.domains" placeholder="请输入域名网址"></el-input></div>
                        <div class="text-12px text-#999 ml-12px">请将“http:/"、“https:/”"等符号去除</div>
                    </div>
                </el-form-item>
                <el-form-item label="公司介绍" prop="introduction">
                    <div class="w-600px"><el-input type="textarea" :rows="8" v-model="ruleForm.introduction" placeholder="请输入公司介绍"></el-input></div>
                </el-form-item>
            </el-form>
            <div class="w-full">
                <div class="flex ml-16px mr-16px pl-94px pb-26px">
                    <el-button :loading="loading" type="primary" @click="handleConfirm(ruleFormRef)">确定提交</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { SuccessFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { addProjectApi,getProjectApi } from '@/api/geoBasic'
import { IProject } from '@/api/geo/types'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { useHead } from '@vueuse/head'

const ruleFormRef = ref<FormInstance>()

const loading = ref(false)

const disabled = ref(false)

const ruleForm = reactive<IProject>({
    name: '',
    domains: '',
    targetWord: '',
    introduction: '',
    disabled:false
})

const rules = reactive<FormRules<IProject>>({
    name: [
        { required: true, message: '请输入完整公司名称', trigger: 'blur' }
    ],
    targetWord: [
        { required: true, message: '请输入商铺目标词', trigger: 'blur' }
    ],
})

async function handleConfirm(formEl: FormInstance | undefined) {
    loading.value = true
    if (!formEl) return
    await formEl.validate(async (valid: boolean, fields: any) => {
        if (valid) {
            const res: ResType = await addProjectApi({
                name: ruleForm.name,
                domains: ruleForm.domains,
                targetWord: ruleForm.targetWord,
                Introduction: ruleForm.introduction
            })
            if(res.code === 200){
                loading.value = false
                getProject()
                confirmMessageBox(SuccessFilled, res.message)
            }
        } else {
            loading.value = false
            console.log('error submit!', fields)
        }
    })
}

async function getProject(){
    const res:ResType = await getProjectApi()
    if(res.code === 200){
        if(res.data){
            ruleForm.name = res.data.name
            ruleForm.domains = res.data.domains
            ruleForm.targetWord = res.data.targetWord
            ruleForm.introduction = res.data.Introduction
            disabled.value = true
            // 根据targetWord的值设置disabled状态
            ruleForm.disabled = !!res.data.targetWord
        }
    }
}

useHead({
    title: 'GEO：引擎之上，生成万象 - 兴旺宝',
})

onMounted(() => {
    getProject()
})
</script>

<style scoped></style>